<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner {
            width: 1000px;
            height: 358px;
            position: relative;
            overflow: hidden;
        }

        .banner>img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="banner">
        <!-- <img src="./images/shutter_1.jpg" style="left: 0px;">
        <img src="./images/shutter_2.jpg" style="left: 1000px;"> -->
    </div>

    <script>
        const banner = document.querySelector('.banner');
        // const images = document.querySelectorAll('.banner>img');


        const imagesData = [
            { name: 'shutter_1.jpg' },
            { name: 'shutter_2.jpg' },
            { name: 'shutter_3.jpg' },
            { name: 'shutter_4.jpg' },
        ]

        imageRender();

        setInterval(() => {
            changeImage();
        }, 3000);


        function changeImage() {
            let autoPlay = setInterval(() => {
                for (let imageEle of banner.children) {
                    let currentLeft = parseInt(imageEle.style.left);
                    currentLeft -= 5;
                    // 当图片完全移出父盒子的范围后，从最左换到最右
                    if (currentLeft <= -banner.offsetWidth) {
                        // 一张图滑动完成后，停掉计时器
                        clearInterval(autoPlay);
                        currentLeft = banner.offsetWidth * imagesData.length + currentLeft;
                    }
                    imageEle.style.left = currentLeft + 'px';
                }
            }, 10);
        }

        function imageRender() {
            banner.innerHTML = imagesData.map((item, index) => {
                return `<img src="./images/${item.name}" style="left: ${index * banner.offsetWidth}px;" >`
            }).join('')
        }


    </script>
</body>

</html>